<!-- eslint-disable no-undef -->
<script setup lang="ts">
import { ref } from 'vue'

// 是否显示登录对话框
import { useUserStore } from '@/store/modules/userStore'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { visiable } = storeToRefs(userStore)

// 获取el-from 表单 ref元素实例类型
import type { FormInstance } from 'element-plus/es/components/form'
const loginRef = ref<FormInstance>() // from 表单实例

// 用户登录表单数据
import { loginForm, clearLogin } from './composables/loginForm'
// 用户登录验证
import { loginRules } from './composables/validate'
// 用户验证码相关操作
import { getAuthCode, computedDis, countDown } from './composables/authCode'

/**对话框关闭执行函数 */
const closeBefore = () => {
  visiable.value = false
  scene.value = 0
  clearLogin()
  loginRef.value?.resetFields()
}

/** 登录方式 0-手机登录(默认) , 1-微信扫码登录 */
const scene = ref<number>(0)
/** 微信登录 */
const weCartLogin = () => {
  scene.value = 1
  const redirect_uri = encodeURIComponent(window.location.origin + '/wxlogin')
  userStore.weixinLogin(redirect_uri, 'login_container')
}

// 前往手机短信验证码登录
const phoneLogin = () => {
  scene.value = 0
}

/** 用户登录 */
const doLogin = () => {
  loginRef.value?.validate((valid) => {
    if (!valid) return
    userStore.doLogin({
      phone: loginForm.phone,
      code: loginForm.authCode,
    })
  })
}
// 监听 'message' 事件
window.addEventListener('message', function (event) {
  if (event.data.type === 'piniaUpdate') {
    // 更新 pinia 数据
    userStore.setwxLoginInfo(event.data.payload)
  }
})
</script>

<template>
  <div class="dialog">
    <el-dialog title="用户登录" v-model="visiable" width="50%" @close="closeBefore">
      <div class="login_container">
        <div class="left">
          <!-- 登录表单 -->
          <el-form :model="loginForm" :rules="loginRules" v-show="scene === 0" ref="loginRef">
            <el-form-item prop="phone">
              <el-input v-model="loginForm.phone" placeholder="请输入手机号码" prefix-icon="Search" />
            </el-form-item>
            <el-form-item prop="authCode">
              <el-input v-model="loginForm.authCode" placeholder="请输入手机验证码" prefix-icon="Lock" :disabled="!loginForm.authCode" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getAuthCode" :disabled="computedDis()">
                <span v-if="countDown === 5">获取验证码</span>
                <span v-else>获取验证码({{ countDown }})</span>
              </el-button>
            </el-form-item>
            <el-form-item>
              <div class="login">
                <el-button type="primary" @click="doLogin">用户登录</el-button>
                <!-- 微信扫码登录 -->
                <div class="weixin">
                  <p>微信扫码登录</p>
                  <svg-icon class="icon" name="weixin1" color="#28C445" width="35px" height="35px" @click="weCartLogin" />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <!-- 微信登录 -->
          <div class="weiChart" v-show="scene === 1">
            <!-- 显示二维码容器id -->
            <div id="login_container"></div>
            <div class="phone">
              <p>手机短信验证码登录</p>
              <svg-icon class="icon" name="shoujihaoshezhi" color="#ff6255" width="30px" height="30px" @click="phoneLogin"></svg-icon>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="scan_codes">
            <div class="codes_img">
              <img src="@/assets/images/code_login_wechat.png" alt="" />
              <svg-icon name="weixin" color="#e6e6e6" width="20px" height="20px" />
              <span>微信扫一扫关注</span>
              <span>“快速预约挂号”</span>
            </div>
            <div class="codes_img">
              <img src="@/assets/images/code_login_wechat.png" alt="" />
              <svg-icon name="shoujidenglu" color="#e6e6e6" width="20px" height="20px" />
              <span>扫一扫下载</span>
              <span>“预约挂号”APP</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  :deep(.el-dialog__body) {
    padding-top: 10px;
    border-top: 0.5px solid #f1eaea;
  }
  .login_container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left {
      flex: 1;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      padding: 20px;
      .login {
        width: 100%;
        display: flex;
        flex-direction: column;
        .weixin {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          p {
            margin-bottom: 5px;
          }
          .icon {
            cursor: pointer;
          }
        }
      }
      .weiChart {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        h1 {
          font-weight: bold;
          font-size: 25px;
        }
        .phone {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          p {
            margin-bottom: 5px;
          }
          .icon {
            cursor: pointer;
          }
        }
      }
    }
    .right {
      flex: 1;
      padding: 0 20px;
      .scan_codes {
        display: flex;
        justify-content: space-between;
        .codes_img {
          width: 45%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
          }
          span {
            color: #413d3d;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
